<!-- 图片水印 -->
<template>
  <PublicPage pageName="图片水印设置" :showNav="true">
    <view class="watermark">
      <view class="itemBox">
        <view class="linh-48 px32 justify-between items-center">
          <view class="label">为所有团图片添加水印</view>
          <u-switch v-model="postParams.switch" :size="44" active-color="#E44435" inactive-color="#eee"></u-switch>
        </view>
      </view>

      <view class="itemBox">
        <view class="linh-48 px32 justify-between items-center">
          <view class="label">水印文字</view>
          <view class="viceColor px32" style="flex:1;">
            <u-input v-model="postParams.text" :clearable="false" type="text" placeholder="请输入你想设置的水印内容"></u-input>
          </view>
        </view>
        <!-- <view class="linh-48 px32 justify-between items-center borderTop">
          <view class="label">文字大小</view>
          <view class="zidingyi px32" style="flex:1;">
            <u-number-box v-model="postParams.size" :max="50" :min="10"></u-number-box>
          </view>
        </view>
        <view class="linh-48 px32 justify-between items-center borderTop">
          <view class="label">文字颜色</view>
          <view class="px32" style="flex:1;" @click="openPick">
            <view class="colorBox" :style="`background-color:rgba(${postParams.color.r},${postParams.color.g},${postParams.color.b},${postParams.color.a}`+');'"></view>
          </view>
        </view>
        <view class="linh-48 px32 justify-between items-center borderTop">
          <view class="label">水印位置</view>
          <view style="flex:1;" class="px32 u-p-t-20 u-p-b-20">
            <view style="width:400rpx;">
            </view>
          </view>
        </view> -->
      </view>

      <view class="itemBox justify-between items-center">
        <view class="linh-48 px32 label">水印预览</view>
        <view class="px32 u-p-t-20 u-p-b-20" style="flex:1;">
          <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/goods_bg.png" style="width:100%;height:auto;display:block;" mode="widthFix"></image>
        </view>
      </view>

      <view class="itemBox">
        <view class="linh-48 px32 label">水印样式</view>
        <view class="viceColor px32 u-p-t-20 u-p-b-40 borderTop">
          <view class="u-p-t-20">1. 您设置水印后，团内所有图片均带有您的专属水印； </view>
          <view class="u-p-t-20">2.其中复制帮卖团不会带有水印，分享帮卖团会带有供货团长水印； </view>
          <view class="u-p-t-20">3.若您设置了“允许用户复制团购”，其他用户复制该团购时，也不会带有您的专属水印。</view>
        </view>
      </view>
      <t-color-picker ref="colorPicker" :color="postParams.color" @confirm="colorConfirm"></t-color-picker>
    </view>
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue";
import tColorPicker from './t-color-picker/t-color-picker.vue'
export default {
  components: {
    PublicPage,
    tColorPicker
  },
  data(){
    return {
      postParams: {
        switch: false,
        text: '',
        size: 30,
        color: {r: 255,g: 255,b: 255,a: 0.6},
      },
    }
  },
  methods:{
    // 打开颜色选择器
    openPick(){
      this.$refs.colorPicker.open();
    },
    colorConfirm(e) {
      this.postParams.color = e.rgba
    },
    // 确认水印修改
    configEdit(){
      // OSS官方工具地址 ：https://gosspublic.alicdn.com/image/index.html?spm=a2c4g.11186623.0.0.5040110azGDsgq
      // x-oss-process=image 为oss统一后缀处理，增加其他处理以/隔开,避免其他地方出现图片大小设置，此处只保存水印处理
      // type 为水印类型，暂时固定文字类型
      // size 为文字大小，暂时固定30px
      // text 为文字的base64
      // color 为字体颜色，目前默认#FFF
      // t 为水印透明度，目前默认90
      // g 为水印位置，目前默认右下角
      // x,y为边距坐标
      let params = `x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,size_30,text_${postParams.text},color_FFFFFF,t_90,g_se,x_10,y_10`
      
    },
    
  }
}
</script>

<style lang="scss" scoped>
.watermark{
  height: 100%;
  .itemBox{
    background-color: #FFF;
    .borderTop{
      box-shadow: inset 0px 1px 0px #EEEEEE;
    }
    .label{
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      flex-shrink: 0;
    }
  }
  .itemBox+.itemBox{
    margin-top: 20rpx;
  }
  .colorBox{
    width: 100rpx;
    height: 40rpx;
    border-radius: 4rpx;
    margin-right: 20rpx;
    border: solid 1px #EEE;
  }
}
</style>